<!-- @author zhengjie -->
<template>
  <div class="">

    <!-- 侧边导航++++++++++++++++++++++ -->
    <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" background-color="#1B1E28" text-color="#fff"
      active-text-color="#fff">

      <div v-if="game_name" class="space-between center" style="padding: 20px;">
        <div class="row center">
          <img style="width: 34px;height: 34px;margin-right: 20px;" :src="game_logo" />
          <div class="f_14" style="color: #fff;">{{game_name}}</div>
        </div>
        <img class="cursor" style="width: 16px;height: 12px;" src="@/assets/images/jtzyb.png" @click="toUrl('/center/switchingGames')" />
      </div>

      <div v-else class="space-between center" style="padding: 20px;margin-top: 35px;" > </div>



   <!--   <div  class="space-between center" style="padding: 20px;">
        <div class="row center">
          <img style="width: 34px;height: 34px;margin-right: 20px;" :src="game_logo" />
          <div class="f_14" style="color: #fff;">{{game_name}}</div>
        </div>
        <img class="cursor" style="width: 16px;height: 12px;" src="@/assets/images/jtzyb.png" @click="toUrl('/center/switchingGames')" />
      </div>

      <div  class="space-between center" style="padding: 20px;margin-top: 35px;" > </div> -->

      <el-menu-item index="1" class="item_nav">
        <i class="el-icon-s-home"></i>
        <span slot="title">开发首页</span>
      </el-menu-item>

      <el-menu-item index="2" class="item_nav">
        <i class="el-icon-map-location"></i>
        <span slot="title">地图</span>
      </el-menu-item>

      <el-menu-item index="3" class="item_nav" @click="toUrl('/center/gameConfiguration')">
        <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/qjb.png" />
        <span slot="title">全局表</span>
      </el-menu-item>

      <el-menu-item index="4" class="item_nav">
        <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/zb.png" />
        <span slot="title">装备道具</span>
      </el-menu-item>


      <el-menu-item index="5" class="item_nav">
        <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/gw.png" />
        <span slot="title">怪物</span>
      </el-menu-item>

      <el-menu-item index="7" class="item_nav">
        <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/jn.png" />
        <span slot="title">技能</span>
      </el-menu-item>

      <el-menu-item index="8" class="item_nav">
        <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/npc.png" />
        <span slot="title">NPC</span>
      </el-menu-item>

      <el-menu-item index="9" class="item_nav" @click="toUrl('/center/switchingGames')">
        <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/qhxy.png" />
        <span slot="title">切换游戏</span>
      </el-menu-item>

      <el-menu-item index="10" class="item_nav " style="padding-left: 20px;">
        <span slot="title">账号安全</span>
      </el-menu-item>

      <el-menu-item index="11" class="item_nav " style="padding-left: 20px;">
        <span slot="title" @click="toUrl('/index')">退出</span>
      </el-menu-item>

    </el-menu>
    <!-- 侧边导航=============== -->
  </div>
</template>

<script>
  import {
    getToken,
    setToken,
    removeToken
  } from '@/utils/auth'
  export default {
    name: 'Sidebar',

    props: {
      defaultActive: {
        type: String,
        default: ''
      },

    },
    data() {
      return {
       game_id: '',
       game_name: '',
       game_logo: '',
      }
    },
    created() {
      this.game_id = localStorage.getItem('game_id')
      this.game_name = localStorage.getItem('game_name')
      this.game_logo = localStorage.getItem('game_logo')
    },
    methods: {

      handleClick(command) {
        var token = getToken();
        if (!token) {
          this.$message({
            message: '请先登录',
            type: 'warning'
          });
        }
        // this.$message('click on item ' + command);
        if (command == 'a') {
          this.toUrl('/center/PersonalCertificate')
        }

        if (command == 'd') {
          this.toUrl('/center/gameConfiguration')
        }



      },
      toUrl(url) {
        console.log('Sidebarts', url)

        this.$router.push({
          path: url
        })
      },




    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  ::v-deep .el-menu-item.is-active {
    background: #779EFE !important;

  }

  .item_nav {
    margin-bottom: 20px !important;
  }

  ::v-deep .el-tabs__item {
    font-size: 18px;
    color: black;
    font-weight: bold;
  }

  ::v-deep .el-tabs__item.is-active {
    color: #409EFF;
  }
</style>
